<template>
    <div class="content">
        <div class="content-1">
            <!-- 照片 -->
            <div class="content-1-brief_introduction">生平照片</div>

            <div class="content-1-img-box">
                <Transition>
                    <img 
                        :key="imgList[imgIndex]"
                        class="content-1-img" 
                        :src="imgList[imgIndex]" 
                        object-fit="fill"
                    />
                </Transition>
                
            </div>
        </div>
        <div class="content-2">
            <!-- 头像，简介 -->
            <div class="content-2-title">{{dataMsg.of_ex2}}同志一路走好</div>
            <div class="content-2-img-box">
                <!-- <img 
                    class="content-2-img" 
                    src="@/assets/avatar/avatar.png" 
                /> -->
                <img 
                    class="content-2-img" 
                    :src="dataMsg.of_ex10" 
                    object-fit="fill"
                />
            </div>
            <div class="content-2-brief_introduction">{{dataMsg.of_ex3}}</div>
        </div>
        <div class="content-3">
            <!-- 视频 -->
            <div class="content-3-brief_introduction">生平视频</div>

            <div class="content-3-video">
                <video 
                    ref="videoRef" 
                    width="100%" 
                    class="video-class"
                    :src="videoUrl"
                    autoplay
                    muted
                    loop
                    controls
                    @loadedmetadata="onLoadedmetadata"
                    @play="play"
                >
                </video>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useStore } from '@/store'
    const store: any = useStore()
    console.log(store.storeMsg)
    const dataMsg: Ref<any> = ref({})
    dataMsg.value = store.storeMsg
    const imgList: Ref<any> = ref([
        // new URL('@/assets/avatar/avatar.png', import.meta.url).href,
        // new URL('@/assets/avatar/bg4.png', import.meta.url).href,
    ])
    imgList.value = store.storeMsg.of_ex11?.split(',')
    const imgIndex: Ref<number> = ref(0)

    // const videoUrl: Ref<any> = ref('http://vjs.zencdn.net/v/oceans.mp4')
    const videoUrl: Ref<any> = ref('')
    videoUrl.value = store.storeMsg.of_ex4

    const videoRef: Ref<any> = ref(null)
    const onLoadedmetadata = () => {
        // videoRef.value.play()
        // nextTick(() => {
        //     videoRef.value.muted = false
        //     videoRef.value.play()
        // })
    }
    const play = () => {
        // videoRef.value.muted = false
        // videoRef.value.play()
    }
    const interval: Ref<any> = ref('')
    onMounted(() => {
        interval.value = setInterval(() => {
            if (imgList.value.length > (imgIndex.value + 1)) {
                imgIndex.value++
            } else {
                imgIndex.value = 0
            }
        }, 5000)
        
    })
    onBeforeUnmount(() => {
        if (interval.value) {
            clearInterval(interval.value)
        }
    })
</script>

<style lang="scss" scoped>
    .v-enter-active {
        transition: opacity 1s ease;
    }

    .v-enter-from,
    .v-leave-to {
    opacity: 0;
    }
    .content::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/avatar/bg8.png');
        background-size: 100% 100%;
        filter: blur(5px);
    }
    .content {
        width: 100vw;
        height: 100vh;
        // background-image: url('@/assets/avatar/bg7.png');
        // background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        color: #fff;
        box-sizing: border-box;
        .content-1, .content-2, .content-3 {
            flex: 1;
            box-sizing: border-box;
            padding: 0 1%;
        }
        .content-1 {
            .content-1-img-box {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 38vw;
                border-radius: 10%;
            }
            .content-1-img {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 10%;
                object-fit: fill;
            }
            .content-1-brief_introduction {
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 25px;
                text-align: center;
                width: 100%;
                height: 4vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 40% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
        }
        .content-2 {
            .content-2-title {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 40px;
                text-align: center;
                width: 100%;
                height: 5vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 80% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
            .content-2-img-box {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 35vw;
                border-radius: 10%;
            }
            .content-2-img {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 10%;
                object-fit: fill;
            }
            .content-2-brief_introduction {
                box-sizing: border-box;
                margin-top: 40px;
                padding: 10px;
                border-radius: 2%;
                font-size: 25px;
                text-indent: 50px;
                text-align: left;

                background-color: rgba(0,0,0,0.5);
            }
        }
        .content-3 {
            .content-3-video {
                box-sizing: border-box;
                padding-top: 5%;
                width: 100%;
                height: 38vw;
                border-radius: 10%;
                .video-class {
                    box-sizing: border-box;
                    padding: 0 10%;
                    height: 100%;
                    border: none;
                }
            }
            .content-3-brief_introduction {
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                // padding-top: 40px;
                font-size: 25px;
                text-align: center;
                width: 100%;
                height: 4vw;
                background-image: url('@/assets/img/backgroundFrame.png');
                background-size: 40% 100%;
                background-repeat: no-repeat;
                background-position: 50% 0;
            }
            
        }
    } 
</style>